import React, { useEffect, useState } from 'react'
import {getAdminList, addAdmin, updateAdmin, delAdmin} from '../../api/user'

import { Button, Table, Tag, Drawer, Input, Select, Tree, message, Modal, Popconfirm } from 'antd'

import menus from '../../router/index'

import {useTreeData} from '../../utils/hooks'

import { useSelector } from 'react-redux'

import { useHistory } from 'react-router-dom'

const Admin = () => {

  // 登录的权限
  const adminRole = useSelector(state => state.user.role)
  // 登录的名称
  const admin = useSelector(state => state.user.adminname)

  const router = useHistory()

  // 创建轻提示
  const [messageApi, contextHolder] = message.useMessage()

  const [adminList, setAdminList] = useState(null)

  useEffect(()=>{
    getAdminList().then(res => {
      // console.log(res);
      setAdminList(res.data)
    })
  }, [])

  // -------- 添加管理员 --------
  const list = useTreeData(menus)
  const [open, setOpen] = useState(false);

  // 用来收集用户输入和选择的内容
  const [adminname, setAdminName] = useState('');
  const [password, setPassword] = useState('');
  const [role, setRole] = useState(1);
  const [checkedKeys, setCheckedKeys] = useState([]);


  const showDrawer = () => {
    setOpen(true);
  };
  const onClose = () => {
    setOpen(false);
  };

  function addFn(){
    // 收集所有需要传递的参数
    // console.log(adminname,password,role,checkedKeys);
    addAdmin({
      adminname,
      password,
      role,
      checkedKeys
    }).then(res => {
      // console.log(res);
      if(res.code === '200'){
        // 添加成功
        messageApi.success('添加成功')

        // 清空表单数据
        setAdminName('')
        setPassword('')
        setRole(1)
        setCheckedKeys([])

        // 关闭抽屉效果
        setOpen(false);

        // 重新加载最新数据即可
        getAdminList().then(res => {
          setAdminList(res.data)
        })

      }else {
        // 添加失败
        messageApi.error('添加失败：' + res.message)
      }
    })
  }
  // -------- 添加管理员 --------

  // -------- 编辑管理员 --------
  const [isModalOpen, setIsModalOpen] = useState(false);

  // const showModal = () => {
  //   setIsModalOpen(true);
  // };
  const handleOk = () => {
    // 确认提交的点击事件
    setIsModalOpen(false);

    // console.log(adminname,password,role,checkedKeys);

    updateAdmin({
      adminname,password,role,checkedKeys
    }).then(res => {
      // console.log(res);

      // 重新加载最新数据即可
      getAdminList().then(res => {
        setAdminList(res.data)
      })

      // 清空表单数据
    setAdminName('')
    setPassword('')
    setRole(1)
    setCheckedKeys([])

    })

    

  };
  const handleCancel = () => {
    // 取消关闭的点击事件
    setIsModalOpen(false);
    // 清空表单数据
    setAdminName('')
    setPassword('')
    setRole(1)
    setCheckedKeys([])
  };

  function editClick(admin){
    // console.log(admin);
    // 打开模态框进行编辑
    setIsModalOpen(true);

    // 设置编辑的默认值
    setAdminName(admin.adminname)
    setPassword(admin.password)
    setRole(admin.role)
    setCheckedKeys(admin.checkedKeys)

  }
  // -------- 编辑管理员 --------

  // 删除管理员
  function delFn(r){
    // console.log(adminid);
    // 发送数据请求进行数据的删除
    delAdmin({adminid: r.adminid}).then(res => {
      if(res.code === '200'){
        messageApi.success('删除用户成功')

        if(r.adminname === admin){
          // 删除的是我们现在当前登录的用户
          localStorage.clear()
          router.push('/login')
        }else {
          // 重新加载最新数据即可
          getAdminList().then(res => {
            setAdminList(res.data)
          })
        }


        
      }else {
        messageApi.error('删除失败：' + res.message)
      }
    })
  }


  return (
    <div>

      {contextHolder}

      <h1>管理员列表 <Button onClick={showDrawer}>添加管理员</Button></h1>
      

      <Table 
      dataSource={adminList} 
      scroll={{y: 500}}
      rowKey={'adminid'}>
        <Table.Column 
        title='序号' 
        render={(t,r,i)=>{
          return <span>{i + 1}</span>
        }} />
        <Table.Column title='管理员名称' dataIndex={'adminname'} />
        <Table.Column 
        title='管理员权限' 
        dataIndex={'role'}
        render={(t)=>{
          return (<>
            { t === 1 
            ?  
            <Tag color="success">管理员</Tag>
             : 
            <Tag color="error">超级管理员</Tag>}
          </>)
        }}
        />
        <Table.Column 
        title='操作' 
        render={(t,r,i)=>{
          return (<>
            <Button type='primary' onClick={()=>{editClick(r)}}>编辑</Button>
            <Popconfirm
            okText={'确认删除'}
            cancelText={'取消删除'}
            title={(<p>
              您确定要删除 
              &nbsp;&nbsp;
              <span style={{color: 'red',fontWeight: '900'}}>{r.adminname}</span>
              &nbsp;&nbsp; 吗？
              </p>)}
              onConfirm={()=>{delFn(r)}}
            >
              <Button type="primary" danger disabled={adminRole === 1}>删除</Button>
            </Popconfirm>

          </>)
        }} />
      </Table>

      {/* ---------- 添加管理员 --------- */}

      <Drawer title="添加管理员" placement="right" onClose={onClose} open={open}>
        <Input 
        placeholder="请输入管理员账号" 
        value={adminname} 
        onChange={e => {setAdminName(e.target.value)}} 
        />
        <Input.Password 
        style={{margin: '20px 0'}} 
        placeholder="请输入管理员密码" 
        allowClear
        value={password} 
        onChange={e => {setPassword(e.target.value)}}
        />
        <Select 
        value={role} 
        onChange={e => {setRole(e)}} 
        style={{width: '100%'}} 
        placeholder={'请选择管理员类型'}>
          <Select.Option value={1}>管理员</Select.Option>
          <Select.Option value={2}>超级管理员</Select.Option>
        </Select>

        <Tree 
        treeData={list} 
        checkable 
        defaultExpandAll 
        checkedKeys={checkedKeys}
        onCheck={(checkedKeys)=>{
          // console.log(checkedKeys);
          // 获取选择的路由权限
          setCheckedKeys(checkedKeys)
        }}
        />

        <Button onClick={addFn}>添加提交</Button>
      </Drawer>

      {/* ---------- 添加管理员 --------- */}

      {/* ---------- 编辑管理员 --------- */}
      <Modal 
      title="编辑管理员" 
      open={isModalOpen} 
      onOk={handleOk} 
      onCancel={handleCancel}
      cancelText='取消关闭'
      okText='确认提交'
      >
        <Input 
        placeholder="请输入管理员账号" 
        value={adminname} 
        onChange={e => {setAdminName(e.target.value)}} 
        />
        <Input.Password 
        disabled
        style={{margin: '20px 0'}} 
        placeholder="请输入管理员密码" 
        allowClear
        value={password} 
        onChange={e => {setPassword(e.target.value)}}
        />
        <Select 
        value={role} 
        onChange={e => {setRole(e)}} 
        style={{width: '100%'}} 
        placeholder={'请选择管理员类型'}>
          <Select.Option value={1}>管理员</Select.Option>
          <Select.Option value={2}>超级管理员</Select.Option>
        </Select>

        <Tree 
        treeData={list} 
        checkable 
        defaultExpandAll 
        checkedKeys={checkedKeys}
        onCheck={(checkedKeys)=>{
          // console.log(checkedKeys);
          // 获取选择的路由权限
          setCheckedKeys(checkedKeys)
        }}
        />
      </Modal>
      {/* ---------- 编辑管理员 --------- */}


    </div>
  )
}

export default Admin    